import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
import Icons from "unplugin-icons/vite"
import IconsResolver from "unplugin-icons/resolver";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import {UserConfig, ConfigEnv, loadEnv, defineConfig} from "vite";
import vue from '@vitejs/plugin-vue'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
import UnoCSS from "unocss/vite"

import path from "path";

const pathSrc = path.resolve(__dirname, "src");

// https://vitejs.dev/config/
export default defineConfig(({mode}: ConfigEnv): UserConfig => {
    const env = loadEnv(mode, process.cwd());
    return {
        server: {
            host: "0.0.0.0",
            // host: "localhost",
            port: Number(env.VITE_APP_PORT),
            open: true, // 运行是否自动打开浏览器
            proxy: {
            // 反向代理解决跨域 /api
            [env.VITE_APP_BASE_API]: {
              target: env.VITE_APP_TARGET_URL,
              changeOrigin: true,
              rewrite: (path) =>
            	path.replace(
            	  new RegExp("^" + env.VITE_APP_BASE_API),
            	  env.VITE_APP_TARGET_BASE_API
            	), // 替换 /dev-api 为 target 接口地址
            },
            },
        },
        plugins: [
            vue(),
            UnoCSS({}),
            AutoImport({
                // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
                imports: ["vue", 'pinia'],
                // eslintrc: {
                //   enabled: false, // 是否自动生成 eslint 规则，建议生成之后设置 false
                //   filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件
                // },
                resolvers: [
                    // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
                    ElementPlusResolver(),
                    // 自动导入图标组件
                    IconsResolver({}),
                ],
                vueTemplate: true, // 是否在 vue 模板中自动导入
                dts: path.resolve(pathSrc, "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径
            }),
            Components({
                resolvers: [
                    // 自动导入 Element Plus 组件
                    ElementPlusResolver(),
                    // 自动注册图标组件
                    IconsResolver({
                        enabledCollections: ["ep"] // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
                    }),
                ],
                dts: path.resolve(pathSrc, "types", "components.d.ts"), // 指定自动导入组件TS类型声明文件路径
            }),
            Icons({
                // 自动安装图标库
                autoInstall: true,
            }),
            createSvgIconsPlugin({
                // 指定需要缓存的图标文件夹
                iconDirs: [path.resolve(pathSrc, "assets/icons")],
                // 指定symbolId格式
                symbolId: "icon-[dir]-[name]",
            }),
        ],
        resolve: {
            alias: {
                // '@': fileURLToPath(new URL('./src', import.meta.url))
                '@': pathSrc
            }
        },
        css: {
            // CSS 预处理器
            preprocessorOptions: {
                //define global scss variable
                scss: {
                    javascriptEnabled: true,
                    additionalData: `
            @use "@/assets/css/variables.scss" as *;
          `,
                },
            },
        },
    }
})
